<template>
    <div>
        <el-card>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>系统管理</el-breadcrumb-item>
                <el-breadcrumb-item>推广码</el-breadcrumb-item>
            </el-breadcrumb>
            <!-- <div class="topBox">
                <el-button @click="copy" size="small">一键复制 <span v-if="checkList.length > 0">（已选{{ checkList.length
                        }}条）</span>
                </el-button>
            </div> -->

            <el-table :data="codeList" ref="mTable" style="width: 100%;margin-top: 16px;" height="670" border>
                <el-table-column prop="codeId" label=" 编号" width="55"></el-table-column>
                <el-table-column prop="codeContent" label="推广码">
                </el-table-column>
                <el-table-column prop="userName" label="推广员"></el-table-column>
                <el-table-column prop="userPhone" label="联系方式"></el-table-column>
                <el-table-column label="状态" width="100">
                    <template slot-scope="prop">
                        <el-tag v-if="prop.row.codeStatus == 0" type="danger">未认证</el-tag>
                        <el-tag v-if="prop.row.codeStatus == 1" type="success">已认证</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="160">
                    <template slot-scope="prop">
                        <el-button icon="el-icon-edit" size="small" @click="handle(prop.row)"
                            v-if="prop.row.codeStatus == 0">绑定推广员</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pageBox">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="page" :page-sizes="[20, 30, 50]" :page-size="size"
                    layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </el-card>

        <el-dialog title="绑定推广员" :visible.sync="addDia" width="30%" :before-close="closeDialog">
            <el-form :model="form" label-width="120px" :rules="rules" ref="form">
                <el-form-item label="绑定推广员名称" prop="userName">
                    <el-input v-model="form.userName" placeholder="请输入绑定推广员"></el-input>
                </el-form-item>
                <el-form-item label="联系方式" prop="userTel">
                    <el-input v-model="form.userTel" placeholder="请输入联系方式"></el-input>
                    <div class="sortTip">tips：此信息用于校验推广员身份，请仔细核对</div>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="closeDialog">取 消</el-button>
                <el-button type="primary" @click="submitHandle">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { getCompanyList, updateCodeById } from "network/codeList";
export default {
    data() {
        return {
            companyId: sessionStorage.companyId,

            codeList: [
                {
                    codeId: 1,
                    code: '14498sa4dsadjdaa',
                    codeStatus: 0,
                    userName: '',
                    userTel: '',
                },
                {
                    codeId: 2,
                    code: 'haoduhaodhouiawioiw',
                    codeStatus: 1,
                    userName: '宋家华',
                    userTel: '15904440357',
                },

            ],

            size: 20,
            page: 1,
            total: 0,
            form: {
                codeId: '',
                userName: '',
                userTel: ''
            },
            addDia: false,
            rules: {
                userName: [
                    { required: true, message: '请输入绑定推广员', trigger: 'blur' },
                ],
                userTel: [
                    { required: true, message: '请输入联系方式', trigger: 'blur' },
                ],
            }
        };
    },
    methods: {

        submitHandle() {
            this.$refs.form.validate((valid) => {
                if (!valid) return
                updateCodeById({
                    codeId: this.form.codeId,
                    userPhone: this.form.userTel,
                    userName: this.form.userName,
                }).then(res => {
                    if (res.flag) {
                        this.getList();
                        this.addDia = false
                    }
                })
                console.log(this.form);

            });
        },
        closeDialog() {
            this.addDia = false
            this.$refs.form.resetFields();
        },



        handle(obj) {
            this.form.codeId = obj.codeId
            this.addDia = true
        },

        handleSizeChange(val) {
            console.log("每页显示");
            this.size = val;
            this.getProList();
        },
        handleCurrentChange(val) {
            console.log(val);
            this.page = val;
            this.getProList();
        },
        getList() {
            getCompanyList({
                companyId: this.companyId,
                pageSize: this.size,
                pageNum: this.page
            }).then(res => {
                if (res.flag) {
                    this.codeList = res.data.list
                    this.total = res.data.total
                }
            })
        }
    },
    created() {
        this.getList()
    }
};
</script>

<style scoped>
.pageBox {
    margin-top: 15px;
    text-align: right;
}

.sortTip {
    color: #409eff;
}
</style>